import React, { Component } from 'react';
class error extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 5
        };
    }

    render() {
        return (
            <h2>
                页面找不到了404<br />
                {this.state.num}秒跳转到首页
            </h2>
        );
    }
    /*
     当前组件受路由管控的 -> 在App.js中
       基于路由规则匹配后，渲染的组件<Route...>
       受路由规则管控的组件，在属性中有三个属性 this.props
         Hsah路由自己模拟了一套History Api的机制(历史记录池)，每一次的路由切换和跳转都会向池子中追加一条记录
         history：{  动态路由
             length：记录历史记录池中的数量
             go(n)：跳转到指定的记录，go(-1)=>goBack() go(1)=>goForward()
             push():跳转到指定的路由地址，也是向池子中追加一条新的记录this.props.history.push(xxx)
             replace():把当前记录替换成谁，能恢复原来的路由
         }
         location:{
             pathname:跳转的路由地址
             search:问号传参的信息
             hash：hsah值
             state：传参的信息,和vue中的隐形传参一样
         }
         match：{} 存储一些路由解析地址后的规则和结果
    */
    componentDidMount() {
        // console.log(this.props);
        let timer = setInterval(() => {
            let num = this.state.num
            num--;
            if (num === 0) {
                // 跳转页面
                // this.props.history.push('./Custor')
                this.props.history.push({
                    //在动态路由跳转的时候传递信息
                    pathname: '/Custor',
                    // search:'?name=kkw',//只能是字符串否则会报错，问号传参
                    // hash:'#Q',
                    state: {//隐形传参，传递后，页面刷新，隐形传参的信息就没有了
                        m: 12
                    }
                })
                clearInterval(timer);
                return;
            }
            this.setState({ num })
        }, 1000);
    }
}

export default error;